<template>
    <div class="container">
        <div class="content">
            <p>下发中...</p>
            <div class="progress">
                <div class="left" :style="{animationDuration: lefttime+'s'}"></div>
                <div class="right" v-if="showProgressR"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "IssuedLoading",
    props: {
        lefttime: {
            type: Number,
            default: 5
        },
        showProgressR: {
            type: Boolean,
            default: false
        }
    }
};
</script>

<style scoped lang='less'>
    .container {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .7);
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .content {
            width: 500px;
            p {
                font-size: 20px;
                color: #FFF;
            }
            .progress {
                width: 100%;
                height: 20px;
                border-radius: 10px;
                overflow: hidden;
                display: flex;
                background-color: #FFF;
                margin-top: 10px;
                position: relative;
                .left {
                    width: 90%;
                    height: 100%;
                    background-color: #409eff;
                    animation-name: leftmove;
                    animation-timing-function: linear;
                    animation-iteration-count: 1;
                }
                .right {
                    width: 10%;
                    height: 100%;
                    background-color: #409eff;
                    animation-name: rightmove;
                    animation-duration: 1s;
                    animation-timing-function: linear;
                    animation-iteration-count: 1;
                    position: absolute;
                    left: 90%;
                }
            }
        }
    }
    @keyframes leftmove {
        from { width: 0; }
        to { width: 90%; }
    }
    @-moz-keyframes leftmove {
        from { width: 0; }
        to { width: 90%; }
    }
    @-webkit-keyframes leftmove {
        from { width: 0; }
        to { width: 90%; }
    }
    @-o-keyframes leftmove {
        from { width: 0; }
        to { width: 90%; }
    }
    @keyframes rightmove {
        from { width: 0; }
        to { width: 10%; }
    }
    @-moz-keyframes rightmove {
        from { width: 0; }
        to { width: 10%; }
    }
    @-webkit-keyframes rightmove {
        from { width: 0; }
        to { width: 10%; }
    }
    @-o-keyframes rightmove {
        from { width: 0; }
        to { width: 10%; }
    }
</style>
